<template>
	<div>
		<el-row :span="24">
			<el-col :ms="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="pc_conbox">
						<div class="pc_conboxs">
							<div class="navbar">
								<div class="left" @click="back1">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
										</svg>
									</i>
									<span>{{$t('l_fanhui')}}</span>
								</div>
								<div class="center">
									<img style="transform: rotate(180deg);" src="../../assets/images/yh/jiantou.png"
										alt="">
									<div class="pc_title">{{$t('l_tuijianhaoyou')}}</div>
									<img src="../../assets/images/yh/jiantou.png" alt="">
								</div>
								<div class="left" style="justify-content: flex-end;"></div>
							</div>
							<div class="con">
								<div class="box">
									<div class="boxtop">
										<div class="boxtopleft">{{$t('l_wodelianjie')}}</div>
										<div class="boxtopright input">
											<el-input v-model="value" disabled />
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 23.001 24.3" width="1em" height="1em"
													fill="currentColor" aria-hidden="true" focusable="false">
													<use
														xlink:href="/icons/icon.svg?version=1696691497006#comm_icon_copy--sprite">
													</use>
												</svg>
											</i>
										</div>
									</div>
									<div class="boxcon">
										<div class="boxcontitle">{{$t('l_kuaijiefenxiang')}}</div>
										<div class="boxconcon">
											<div class="M2J8mjTFQ9Ns9GzH6gHU">
												<div class="wOSAGKl_12mfaWIJZdGo">
													<div v-for="(item,index) in iconlist" :key="index">
														<img :src="item.key" alt="">
														<span>{{item.name}}</span>
													</div>
												</div>
											</div>
											<div class="boxconconright">{{$t('l_gengduo')}} <span
													style="color:var(--theme-text-color-lighten);font-size: 18px;margin-left: 8px;">></span>
											</div>
										</div>
									</div>
									<div class="boxbottom">
										<div class="boxbottomtop">
											<div>{{$t('l_youxiaoxiaji')}}<span
													style="color: var(--theme-primary-color);">0</span>{{$t('l_ren')}}</div>
											<div style="color: var(--theme-primary-color);margin-left: 0.1rem;cursor: pointer;"
												@click="zzc1 = true">{{$t('l_xiangqing')}}</div>
										</div>
									</div>
								</div>
								<div class="zzc" v-if="zzc1">
									<div class="zzcbox zzcbox1" style="height: 620px;">
										<div class="zzccon">
											<div class="zzctitle">{{$t('l_wodetuiguang')}}</div>
											<img @click="zzc1 = false" class="closeIcon"
												src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png" alt="">
											<div
												style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 0.2rem;">
												<select v-model="mp" class="pcSele">
													<option value="0">{{$t('l_quanbu')}}</option>
													<option value="1">{{$t('l_youxiao')}}</option>
													<option value="2">{{$t('l_wuxiao')}}</option>
												</select>
												<div class="search"
													style="display: flex;justify-content: flex-start;align-items: center;">
													<el-input v-model="input" :placeholder="$t('l_zhanghao')" />
													<span class="ant-input-suffix">
														<i aria-label="图标: search" tabindex="-1"
															class="anticon anticon-search ant-input-search-icon">
															<svg viewBox="64 64 896 896" data-icon="search" width="1em"
																height="1em" fill="currentColor" aria-hidden="true"
																focusable="false" class="">
																<path
																	d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
																</path>
															</svg>
														</i>
													</span>
												</div>
											</div>
											<div class="nodata">
												<img src="../../assets/images/img/nodata1.png" alt="">
												<div>{{$t('l_zanwujilu')}}</div>
											</div>
										</div>
									</div>
								</div>
								<div class="box1">
									<div class="box1con">
										<div class="box1conbox" v-for="item in 22">
											<div class="items">
												<div class="itembg">
													<div class="kaibg">
														<img src="../../assets/images/img/kai.png" alt="">
													</div>
												</div>
												<div class="itemcon">{{$t('l_tuiguang')}}4{{$t('l_ren')}}</div>
												<div class="itembottom">15.00</div>
												<div class="itemicon1"
													v-if="item == 4 || item == 5 || item == 12 || item == 13 || item == 20">
													<i
														style="display: inline-flex; justify-content: center; align-items: center;">
														<svg viewBox="0 0 37 35.53" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use
																xlink:href="/icons/icon.svg?version=1696691497006#img_tghdjt--sprite">
															</use>
														</svg>
													</i>
												</div>
											</div>
											<div class="itemicon"
												v-if="item < 4 || (item > 8 && item < 12) ||  (item > 16 && item < 20)">
												<i
													style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 37 35.53" width="1em" height="1em"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use
															xlink:href="/icons/icon.svg?version=1696691497006#img_tghdjt--sprite">
														</use>
													</svg>
												</i>
											</div>
											<div class="itemicon"
												v-if="(item > 5 && item < 8) || (item > 13 && item < 16)|| (item > 20 && item < 22)">
												<i
													style="display: inline-flex; justify-content: center; align-items: center;transform: rotate(180deg);">
													<svg viewBox="0 0 37 35.53" width="1em" height="1em"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use
															xlink:href="/icons/icon.svg?version=1696691497006#img_tghdjt--sprite">
														</use>
													</svg>
												</i>
											</div>
											<div class="itemicon" v-if="item == 5 || item == 13">
												<i
													style="display: inline-flex; justify-content: center; align-items: center;transform: rotate(180deg);margin-top: -0.4rem;">
													<svg viewBox="0 0 37 35.53" width="1em" height="1em"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use
															xlink:href="/icons/icon.svg?version=1696691497006#img_tghdjt--sprite">
														</use>
													</svg>
												</i>
											</div>
										</div>
									</div>
								</div>
								<div class="box2">
									<div class="box2title">{{$t('l_shenmoshiyouxiao')}}</div>
									<div class="box2con">
										<div>{{$t('l_xiajileiji')}}</div>
										<div style="color: var(--theme-text-color-darken);">100 {{$t('l_huoyishang')}}
										</div>
									</div>
									<div class="box2con box2con1">
										<div>{{$t('l_xiajileijidama')}}</div>
										<div style="color: var(--theme-text-color-darken);">1555 {{$t('l_huoyishang')}}
										</div>
									</div>
								</div>
								<div class="box3">
									<div style="font-weight: 700;">{{$t('l_huodongtiaojian')}}:</div>
									<div>{{$t('l_zhishuxiaji')}}</div>
									<div style="font-weight: 700;">{{$t('l_huodongneirong')}}:</div>
									<div>{{$t('l_fazhanhaoyou1')}}</div>
									<div>{{$t('l_fazhanhaoyou2')}}</div>
									<div>{{$t('l_fazhanhaoyou3')}}</div>
									<div>{{$t('l_fazhanhaoyou4')}}</div>
									<div>{{$t('l_fazhanhaoyou5')}}</div>
									<div>{{$t('l_fazhanhaoyou6')}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :ms="0" :xs="24">
				<div>
					<navHeader :title="$t('l_tuijianhaoyou')" :backCount="-2"></navHeader>
					<div class="con">
						<div class="box">
							<div class="boxtop">
								<div class="boxtopleft">{{$t('l_wodelianjie')}}</div>
								<div class="boxtopright input">
									<el-input v-model="value" disabled />
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 23.001 24.3" width="1em" height="1em" fill="currentColor"
											aria-hidden="true" focusable="false">
											<use
												xlink:href="/icons/icon.svg?version=1696691497006#comm_icon_copy--sprite">
											</use>
										</svg>
									</i>
								</div>
							</div>
							<div class="boxcon">
								<div class="boxcontitle">{{$t('l_kuaijiefenxiang')}}</div>
								<div class="boxconcon">
									<div class="M2J8mjTFQ9Ns9GzH6gHU">
										<div class="wOSAGKl_12mfaWIJZdGo">
											<div v-for="(item,index) in iconlist" :key="index">
												<img :src="item.key" alt="">
												<span>{{item.name}}</span>
											</div>
										</div>
									</div>
									<div class="boxconconright">{{$t('l_gengduo')}} <span
											style="color:var(--theme-text-color-lighten);font-size: 0.22rem;">></span>
									</div>
								</div>
							</div>
							<div class="boxbottom">
								<div class="boxbottomtop">
									<div>{{$t('l_youxiaoxiaji')}}<span style="color: var(--theme-primary-color);">0</span>{{$t('l_ren')}}
									</div>
									<div style="color: var(--theme-primary-color);margin-left: 0.1rem;" @click="zzc = true">
										{{$t('l_xiangqing')}}</div>
								</div>
							</div>
						</div>
						<div class="zzc" v-if="zzc">
							<div class="zzcbox" style="height: 493px;">
								<div class="zzccon">
									<div class="zzctitle">{{$t('l_wodetuiguang')}}</div>
									<img @click="zzc = false" class="closeIcon"
										src="../../assets/images/yh/main.f9fa3765529e3b5b42fa.png" alt="">
									<div
										style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 0.2rem;">
										<el-select v-model="mp" popper-class="dropdown" :popper-append-to-body="false">
											<el-option v-for="item in selectlist" :key="item.value" :label="item.label"
												:value="item.value" />
										</el-select>
										</el-select>
										<div class="search"
											style="display: flex;justify-content: flex-start;align-items: center;">
											<el-input v-model="input" :placeholder="$t('l_zhanghao')" />
											<span class="ant-input-suffix">
												<i aria-label="图标: search" tabindex="-1"
													class="anticon anticon-search ant-input-search-icon">
													<svg viewBox="64 64 896 896" data-icon="search" width="1em"
														height="1em" fill="currentColor" aria-hidden="true"
														focusable="false" class="">
														<path
															d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
														</path>
													</svg>
												</i>
											</span>
										</div>
									</div>
									<div class="nodata">
										<img src="../../assets/images/img/nodata1.png" alt="">
										<div>{{$t('l_zanwujilu')}}</div>
									</div>
								</div>
							</div>
						</div>
						<div class="box1">
							<div class="box1con">
								<div class="box1conbox" v-for="item in 22">
									<div class="item">
										<div class="itembg">
											<div class="kaibg">
												<img src="../../assets/images/img/kai.png" alt="">
											</div>
										</div>
										<div class="itemcon">{{$t('l_tuiguang')}}4{{$t('l_ren')}}</div>
										<div class="itembottom">15.00</div>
										<div class="itemicon1"
											v-if="item == 4 || item == 5 || item == 12 || item == 13 || item == 20">
											<i
												style="display: inline-flex; justify-content: center; align-items: center;">
												<svg viewBox="0 0 37 35.53" width="1em" height="1em" fill="currentColor"
													aria-hidden="true" focusable="false">
													<use
														xlink:href="/icons/icon.svg?version=1696691497006#img_tghdjt--sprite">
													</use>
												</svg>
											</i>
										</div>
									</div>
									<div class="itemicon"
										v-if="item < 4 || (item > 8 && item < 12) ||  (item > 16 && item < 20)">
										<i style="display: inline-flex; justify-content: center; align-items: center;">
											<svg viewBox="0 0 37 35.53" width="1em" height="1em" fill="currentColor"
												aria-hidden="true" focusable="false">
												<use
													xlink:href="/icons/icon.svg?version=1696691497006#img_tghdjt--sprite">
												</use>
											</svg>
										</i>
									</div>
									<div class="itemicon"
										v-if="(item > 5 && item < 8) || (item > 13 && item < 16)|| (item > 20 && item < 22)">
										<i
											style="display: inline-flex; justify-content: center; align-items: center;transform: rotate(180deg);">
											<svg viewBox="0 0 37 35.53" width="1em" height="1em" fill="currentColor"
												aria-hidden="true" focusable="false">
												<use
													xlink:href="/icons/icon.svg?version=1696691497006#img_tghdjt--sprite">
												</use>
											</svg>
										</i>
									</div>
									<div class="itemicon" v-if="item == 5 || item == 13">
										<i
											style="display: inline-flex; justify-content: center; align-items: center;transform: rotate(180deg);margin-top: -0.4rem;">
											<svg viewBox="0 0 37 35.53" width="1em" height="1em" fill="currentColor"
												aria-hidden="true" focusable="false">
												<use
													xlink:href="/icons/icon.svg?version=1696691497006#img_tghdjt--sprite">
												</use>
											</svg>
										</i>
									</div>
								</div>
							</div>
						</div>
						<div class="box2">
							<div class="box2title">{{$t('l_shenmoshiyouxiao')}}</div>
							<div class="box2con">
								<div>{{$t('l_xiajileiji')}}</div>
								<div style="color: var(--theme-text-color-darken);">100 {{$t('l_huoyishang')}}</div>
							</div>
							<div class="box2con box2con1">
								<div>{{$t('l_xiajileijidama')}}</div>
								<div style="color: var(--theme-text-color-darken);">1555 {{$t('l_huoyishang')}}</div>
							</div>
						</div>
						<div class="box3">
							<div style="font-weight: 700;">{{$t('l_huodongtiaojian')}}:</div>
							<div>{{$t('l_zhishuxiaji')}}</div>
							<div style="font-weight: 700;">{{$t('l_huodongneirong')}}:</div>
							<div>{{$t('l_fazhanhaoyou1')}}</div>
							<div>{{$t('l_fazhanhaoyou2')}}</div>
							<div>{{$t('l_fazhanhaoyou3')}}</div>
							<div>{{$t('l_fazhanhaoyou4')}}</div>
							<div>{{$t('l_fazhanhaoyou5')}}</div>
							<div>{{$t('l_fazhanhaoyou6')}}</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer
		},
		data() {
			return {
				value: '123',
				iconlist: [{
						id: 0,
						name: 'QQ',
						key: require('../../assets/images/img/qq.png'),
					},
					{
						id: 1,
						name: 'Wechat',
						key: require('../../assets/images/img/wx.png'),
					},
					{
						id: 2,
						name: 'WeChat Moments',
						key: require('../../assets/images/img/pyq.png'),
					},
					{
						id: 3,
						name: 'Facebook',
						key: require('../../assets/images/img/facebook.png'),
					},
					{
						id: 4,
						name: 'Telegram',
						key: require('../../assets/images/img/tg.png'),
					},
					{
						id: 5,
						name: 'WhatsApp',
						key: require('../../assets/images/img/wa.png'),
					},
					{
						id: 6,
						name: 'Line',
						key: require('../../assets/images/img/line.png'),
					},
				],

				zzc: false,
				zzc1: false,

				mp: '0',
				selectlist: [{
						value: '0',
						label: this.$t('l_quanbu'),
					},
					{
						value: '1',
						label: this.$t('l_youxiao'),
					},
					{
						value: '2',
						label: this.$t('l_wuxiao'),
					}
				],
				input: '',

				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1: 0,
			}
		},
		methods: {
			back1() {
				this.$router.go(-1)
			},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
		}
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.con {
		width: 100%;
		height: calc(100vh - 46px);
		padding: .2rem;
		position: relative;
		overflow-y: scroll;
	}

	.con::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.box {
		width: 100%;
		padding: .2rem;
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		margin-bottom: 0.2rem;
	}

	.boxtop {
		justify-content: space-between;
		align-items: center;
		display: flex;
		width: 100%;
		border-bottom: 0.01rem solid var(--theme-color-line);
		padding-bottom: 0.2rem;
	}

	.boxtopleft {
		color: var(--theme-text-color-lighten);
		font-size: .2rem;
		margin-right: .2rem;
	}

	.boxtopright {
		flex: 1;
		justify-content: space-between;
		align-items: center;
		display: flex;
		border: 0.01rem solid var(--theme-color-line);
		border-radius: 0.1rem;
		overflow: hidden;
	}

	.el-input {
		flex: 1;
	}

	/deep/.input .el-input__inner {
		width: 99% !important;
		height: 25px !important;
		border: 0 !important;
		border-radius: 0 !important;
		font-size: .2rem !important;
		padding: 0 7px !important;
		color: var(--theme-text-color) !important;
	}

	.boxtopright i {
		font-size: .25rem;
		margin: 0 0.2rem;
		color: var(--theme-primary-color);
		cursor: pointer;
	}

	.boxcon {
		width: 100%;
		border-bottom: 0.01rem solid var(--theme-color-line);
		padding-bottom: 0.2rem;
	}

	.boxcontitle {
		color: var(--theme-text-color-lighten);
		font-size: .2rem;
		margin: 0.2rem 0.2rem 0 0;
	}

	.boxconcon {
		justify-content: space-between;
		align-items: center;
		display: flex;
		width: 100%;
	}

	.M2J8mjTFQ9Ns9GzH6gHU {
		flex: 1;
		overflow: hidden;
	}

	.wOSAGKl_12mfaWIJZdGo {
		align-items: flex-start;
		justify-content: flex-start;
		cursor: pointer;
		display: flex;
		min-height: 0.85rem;
		padding-bottom: 0.06rem;
		padding-top: 0.2rem;
		overflow-x: scroll;
	}

	.wOSAGKl_12mfaWIJZdGo div {
		margin-right: 0.3rem;
		align-items: center;
		display: flex;
		flex-direction: column;
		min-width: 0.75rem;
	}

	.wOSAGKl_12mfaWIJZdGo div img {
		width: 0.65rem;
		height: 0.65rem;
		border-radius: 50%;
	}

	.wOSAGKl_12mfaWIJZdGo div span {
		display: inline-block;
		font-size: .16rem;
		line-height: 1;
		max-width: 0.9rem;
		overflow: hidden;
		padding-top: 0.1rem;
		text-align: center;
		color: var(--theme-text-color);
		text-overflow: ellipsis;
	}

	.boxconconright {
		width: 1rem;
		text-align: center;
		color: var(--theme-primary-color);
		font-size: .18rem;
	}

	.boxbottom {
		width: 100%;
		padding: 0.2rem 0 0;
	}

	.boxbottomtop {
		width: 100%;
		align-items: center;
		justify-content: flex-start;
		display: flex;
		color: var(--theme-text-color-lighten);
		font-size: .2rem;
	}

	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		background-color: rgba(0, 0, 0, .55);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.zzcbox {
		width: 10rem;
		max-width: calc(100vw - 16px);
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
	}

	.zzcbox1 {
		width: 797px;
		height: 300px;
	}

	.zzccon {
		height: 100%;
		background-color: var(--theme-top-nav-bg);;
		border: 1px solid;
		border-color: var(--theme-color-line);
		border-radius: 0.2rem;
		position: relative;
		padding: 0.2rem 0.3rem 0.3rem !important;
	}

	.zzctitle {
		font-size: .22rem;
		font-weight: 700;
		color: var(--theme-text-color-darken);
		text-align: center;
		margin-bottom: .3rem;
	}

	.closeIcon {
		align-items: center;
		background: none;
		border-radius: 50%;
		bottom: -0.9rem;
		display: flex;
		height: 0.6rem;
		justify-content: center;
		margin-right: -0.3rem;
		position: absolute;
		right: 50%;
		top: auto;
		width: 0.6rem;
	}

	.closeIcon img {
		height: 100%;
		width: 100%;
	}

	.el-select {
		width: 1.6rem;
		margin-right: 0.2rem;
		border-radius: 0.5rem;
	}

	/deep/ .el-input__suffix {
		display: block !important;
	}

	/deep/.el-select .el-input__inner {
		min-width: auto;
		width: 1.6rem;
		height: 0.5rem !important;
		border: 0;
		padding: 0 10px !important;
		color: #55657e !important;
		border-radius: 0.5rem !important;
		border: 0.01rem solid var(--theme-color-line);
	}

	/deep/.el-select .dropdown {
		background-color: var(--theme-top-nav-bg)!important;
		border-color: #293548 !important;
		color: #293548 !important;
	}

	/deep/.el-select .el-select-dropdown__item {
		color: #354358 !important;
	}

	/deep/.el-select .popper__arrow {
		border-bottom-color: #293548 !important;
	}

	/deep/.el-select .el-popper .popper__arrow::after {
		border-bottom-color: #293548 !important;
	}

	/deep/.el-select .el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: transparent;
		color: #005dfe !important;
	}

	.search {
		width: 2.8rem;
		height: 0.5rem !important;
		border-radius: 0.5rem;
		border: 0.01rem solid var(--theme-color-line);
		position: relative;
	}

	/deep/.search .el-input__inner {
		min-width: auto;
		width: 1.4rem;
		height: 0.47rem !important;
		border: 0 !important;
		padding: 0 10px !important;
		padding-right: 30px !important;
		color: #55657e !important;
		border-radius: 0.5rem !important;
		font-size: .2rem;
	}

	.ant-input-suffix {
		right: 12px;
		align-items: center;
		color: var(--theme-primary-color);
		display: flex;
		line-height: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		font-size: .26rem;
	}

	.nodata {
		margin: 0 auto;
		text-align: center;
		margin-top: 2rem;
	}

	.nodata img {
		height: 2.1rem;
		margin-bottom: 0.1rem;
		margin: 0 auto;
		width: 2.1rem;
	}

	.nodata div {
		color: var(--theme-alt-neutral-2);
		font-size: .26rem;
	}

	.box1 {
		width: 100%;
		padding: 0.2rem;
		background-color: var(--theme-main-bg-color);
		margin-bottom: 0.2rem;
		margin-top: 0.2rem;
		border-radius: 0.1rem;
	}

	.box1con {
		width: 100%;
		align-items: flex-start;
		justify-content: flex-end;
		display: flex;
		flex-wrap: wrap;
	}

	.box1conbox {
		height: 100%;
		align-items: center;
		justify-content: flex-end;
		display: flex;
		padding-right: 0.09rem;
	}

	.box1conbox:nth-child(4n) {
		padding-right: 0;
	}

	.box1conbox:last-child {
		padding-right: 0;
	}

	.item {
		width: 1.36rem;
		position: relative;
	}

	.itembg {
		background: url(../../assets/images/img/hongbao.png);
		background-size: cover;
		width: 1.36rem;
		height: 0.75rem;
		position: relative;
	}

	.kaibg {
		background: url(../../assets/images/img/kaibg.png);
		background-size: cover;
		width: 0.26rem;
		height: 0.27rem;
		align-items: center;
		display: flex;
		justify-content: center;
		left: 0.54rem;
		position: absolute;
		top: 0.12rem;
	}

	.kaibg img {
		width: 0.16rem;
	}

	.itemcon {
		width: 100%;
		font-size: .18rem;
		color: var(--theme-text-color-activities-text);
		position: absolute;
		text-align: center;
		top: 0.52rem;
	}

	.itembottom {
		width: 100%;
		text-align: center;
		font-size: .2rem;
		color: var(--theme-text-color-lighten);
		margin-top: 0.1rem;
	}

	.itemicon {
		color: var(--theme-text-color-lighten);
		padding-left: 0.09rem;
		display: flex;
	}

	.itemicon i {
		font-size: 12px;
	}

	.itemicon1 {
		color: var(--theme-text-color-lighten);
		padding-left: 0.09rem;
		display: flex;
		justify-content: center;
		height: 20px;
	}

	.itemicon1 i {
		font-size: 12px;
		transform: rotate(90deg);
	}

	.box2 {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		padding-top: 0 !important;
		padding: 0.2rem;
		margin-bottom: 0.2rem;
	}

	.box2title {
		font-size: .24rem;
		height: 0.75rem;
		color: var(--theme-text-color-lighten);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box2con {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--theme-bg-color);
		min-height: 0.5rem;
	}

	.box2con1 {
		background-color: transparent;
	}

	.box2con div {
		text-align: center;
		width: 50%;
		font-size: .16rem;
		color: var(--theme-text-color);
	}

	.box3 {
		padding: 0.2rem;
		line-height: 0.4rem;
		font-size: 0.24rem;
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		white-space: pre-wrap;
		color: var(--theme-text-color);
		word-break: break-word;
	}

	.pc_conboxs {
		.con {
			width: 100%;
			height: calc(100vh - 46px);
			padding: 0;
			position: relative;
			overflow-y: scroll;
			background-color: transparent;
		}

		.con::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}

		.box {
			width: 100%;
			padding: 16px;
			background-color: var(--theme-main-bg-color);
			border-radius: 8px;
			margin-bottom: 16px;
		}

		.boxtop {
			justify-content: space-between;
			align-items: center;
			display: flex;
			width: 100%;
			border-bottom: 1px solid var(--theme-color-line);
			padding-bottom: 16px;
		}

		.boxtopleft {
			color: var(--theme-text-color-lighten);
			font-size: 16px;
			margin-right: 16px;
		}

		.boxtopright {
			flex: 1;
			justify-content: space-between;
			align-items: center;
			display: flex;
			border: 1px solid var(--theme-color-line);
			border-radius: 8px;
			overflow: hidden;
		}

		.el-input {
			flex: 1;
		}

		/deep/.input .el-input__inner {
			width: 99% !important;
			height: 30px !important;
			border: 0 !important;
			border-radius: 0 !important;
			font-size: 16px !important;
			padding: 0 7px !important;
			color: var(--theme-text-color) !important;
		}

		.boxtopright i {
			font-size: 16px;
			margin: 0 16px;
			color: var(--theme-primary-color);
			cursor: pointer;
		}

		.boxcon {
			width: 100%;
			border-bottom: 0.01rem solid var(--theme-color-line);
			padding-bottom: 16px;
		}

		.boxcontitle {
			color: var(--theme-text-color-lighten);
			font-size: 16px;
			margin: 16px 16px 0 0;
		}

		.boxconcon {
			justify-content: space-between;
			align-items: center;
			display: flex;
			width: 100%;
		}

		.M2J8mjTFQ9Ns9GzH6gHU {
			flex: 1;
			overflow: hidden;
		}

		.wOSAGKl_12mfaWIJZdGo {
			align-items: flex-start;
			justify-content: flex-start;
			cursor: pointer;
			display: flex;
			min-height: 94px;
			padding-bottom: 4px;
			padding-top: 16px;
			overflow-x: hidden;
		}

		.wOSAGKl_12mfaWIJZdGo div {
			margin-right: 24px;
			align-items: center;
			display: flex;
			flex-direction: column;
			min-width: 61px;
		}

		.wOSAGKl_12mfaWIJZdGo div img {
			width: 39px;
			height: 39px;
			border-radius: 50%;
		}

		.wOSAGKl_12mfaWIJZdGo div span {
			display: inline-block;
			font-size: 13px;
			line-height: 1;
			max-width: 61px;
			overflow: hidden;
			padding-top: 8px;
			text-align: center;
			color: var(--theme-text-color);
			text-overflow: ellipsis;
		}

		.boxconconright {
			width: 63px;
			text-align: center;
			color: var(--theme-primary-color);
			font-size: 12px;
			align-items: center;
			justify-content: flex-start;
			display: flex;
		}

		.boxbottom {
			width: 100%;
			padding: 16px 0 0;
		}

		.boxbottomtop {
			width: 100%;
			align-items: center;
			justify-content: flex-start;
			display: flex;
			color: var(--theme-text-color-lighten);
			font-size: 16px;
		}

		.zzccon {
			height: 100%;
			background-color: var(--theme-top-nav-bg);;
			border: 1px solid;
			border-color: var(--theme-color-line);
			border-radius: 16px;
			position: relative;
			padding: 16px 24px 24px !important;
		}

		.zzctitle {
			font-size: 18px;
			font-weight: 700;
			color: var(--theme-text-color-darken);
			text-align: center;
			margin-bottom: 24px;
		}

		.closeIcon {
			align-items: center;
			background: none;
			border-radius: 50%;
			bottom: -80px;
			display: flex;
			height: 40px;
			justify-content: center;
			margin-right: -20px;
			position: absolute;
			right: 50%;
			top: auto;
			width: 40px;
		}

		.closeIcon img {
			height: 100%;
			width: 100%;
		}

		select {
			max-width: 3.15rem;
			min-width: 1.6rem;
			width: auto !important;
			list-style: none;
			margin: 0;
			line-height: 1.5;
			outline: 0;
			background-color: var(--theme-top-nav-bg)!important;
			border-radius: 0.5rem;
			box-shadow: none;
			color: var(--theme-text-color);
			font-size: .2rem;
			height: 0.5rem !important;
			text-align: center;
			border-color: var(--theme-color-line);
		}

		select:focus {
			border-color: var(--theme-primary-color);
		}

		.pcSele {
			max-width: 150px;
			min-width: 90px;
			width: auto !important;
			list-style: none;
			margin: 0;
			line-height: 32px;
			outline: 0;
			background-color: var(--theme-top-nav-bg)!important;
			border-radius: 16px;
			box-shadow: none;
			color: var(--theme-text-color);
			font-size: 12px;
			height: 32px !important;
			text-align: center;
			border-color: var(--theme-color-line);
		}

		.search {
			width: 175px;
			height: 40px !important;
			border-radius: 40px;
			border: 1px solid var(--theme-color-line);
			position: relative;
		}

		/deep/.search .el-input__inner {
			min-width: auto;
			width: 1.4rem;
			height: 38px !important;
			border: 0 !important;
			padding: 0 10px !important;
			padding-right: 30px !important;
			color: #55657e !important;
			border-radius: 40px !important;
			font-size: 16px;
		}

		.ant-input-suffix {
			right: 12px;
			align-items: center;
			color: var(--theme-primary-color);
			display: flex;
			line-height: 0;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
			font-size: 20px;
		}

		.nodata {
			margin: 0 auto;
			text-align: center;
			margin-top: 100px;
		}

		.nodata img {
			height: 167px;
			margin-bottom: 7px;
			margin: 0 auto;
			width: 167px;
		}

		.nodata div {
			color: var(--theme-alt-neutral-2);
			font-size: 18px;
		}

		.box1 {
			width: 100%;
			padding: 16px;
			background-color: var(--theme-main-bg-color);
			margin-bottom: 16px;
			margin-top: 16px;
			border-radius: 8px;
		}

		.box1con {
			width: 100%;
			align-items: flex-start;
			justify-content: flex-end;
			display: flex;
			flex-wrap: wrap;
		}

		.box1conbox {
			height: 100%;
			align-items: center;
			justify-content: flex-end;
			display: flex;
			padding-right: 32px;
		}

		.box1conbox:nth-child(4n) {
			padding-right: 0;
		}

		.box1conbox:last-child {
			padding-right: 0;
		}

		.items {
			width: 169px;
			height: auto;
			position: relative;
		}

		.itembg {
			background: url(../../assets/images/img/hongbao.png);
			background-size: cover;
			width: 169px;
			height: 94px;
			position: relative;
		}

		.kaibg {
			background: url(../../assets/images/img/kaibg.png);
			background-size: cover;
			width: 35px;
			height: 35px;
			align-items: center;
			display: flex;
			justify-content: center;
			left: 67px;
			position: absolute;
			top: 15px;
		}

		.kaibg img {
			width: 20px;
		}

		.itemcon {
			width: 100%;
			font-size: 20px;
			color: var(--theme-text-color-activities-text);
			position: absolute;
			text-align: center;
			top: 54px;
		}

		.itembottom {
			width: 100%;
			text-align: center;
			font-size: 16px;
			color: var(--theme-text-color-lighten);
			margin-top: 8px;
		}

		.itemicon {
			color: var(--theme-text-color-lighten);
			padding-left: 32px;
			display: flex;
		}

		.itemicon i {
			font-size: 12px;
		}

		.itemicon1 {
			color: var(--theme-text-color-lighten);
			padding-left: 8px;
			display: flex;
			justify-content: center;
			height: 36px;
		}

		.itemicon1 i {
			font-size: 12px;
			transform: rotate(90deg);
		}

		.box2 {
			background-color: var(--theme-main-bg-color);
			border-radius: 8px;
			padding-top: 0 !important;
			padding: 16px;
			margin-bottom: 16px;
		}

		.box2title {
			font-size: 16px;
			height: 50px;
			color: var(--theme-text-color-lighten);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.box2con {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: var(--theme-bg-color);
			min-height: 40px;
		}

		.box2con1 {
			background-color: transparent;
		}

		.box2con div {
			text-align: center;
			width: 50%;
			font-size: 14px;
			color: var(--theme-text-color);
		}

		.box3 {
			padding: 16px;
			line-height: 32px;
			font-size: 14px;
			background-color: var(--theme-main-bg-color);
			border-radius: 8px;
			white-space: pre-wrap;
			color: var(--theme-text-color);
			word-break: break-word;
		}
	}
</style>